<script setup lang="ts">
import { ref } from 'vue';
const isShow = ref(false)
</script>

<template>
  <!-- transition vue内置的动画组件 -->
  <!-- 将需要切换显示隐藏的盒子, 使用transition进行包裹 -->
  <!-- 一旦进行包裹, 这个盒子在显示隐藏的时候, 盒子自身, 就会有6个类进行切换 -->
  <!-- 默认情况下., name的属性值是v -->
  <!-- 想添加多个动画, 需要给其他的动画组件起名字, name值替代 
      <transition  name="fade"></transition>  
  -->
  <!--
    注意点: transition 其实只能完成两个状态的切换 A - B 
           多个状态进行切换, 需要配合animation
    -->


  <button @click="isShow = !isShow">按钮</button>
  <!-- <transition>
    <div class="box" v-if="isShow"></div>
  </transition>

  <transition name="fade">
    <div class="box" v-if="isShow"></div>
  </transition> -->

   <transition name="bounce">
    <div class="box" v-if="isShow"></div>
   </transition>
</template>

<style scoped lang="less">
.box {
  width: 300px;
  height: 300px;
  background-color: purple;
}

// 动画效果
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
// 进入的状态效果
.bounce-enter-active {
  animation: 3.5s bounce;
}
// 离开的状态效果
// 动画翻转
.bounce-leave-active {
  animation: 3.5s bounce reverse;
}

// 进入
.fade-enter-from {
  width: 200px;
  height: 200px;
  opacity: 0;
}

.fade-enter-active {
  transition: all 2.5s;
}

.fade-enter-to {
  width: 300px;
  height: 300px;
  opacity: 1;
}

// 进入
.v-enter-from {
  width: 150px;
  height: 150px;
  opacity: 0;
}

.v-enter-active {
  transition: all 2.5s;
}

.v-enter-to {
  width: 300px;
  height: 300px;
  opacity: 1;
}

// 离开
.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: all 1.5s;
}

.v-leave-to {
  opacity: 0;
}
</style>